<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js开始</title>
</head>
<body>
    <div class="father">
        <h1>标题一</h1>
        <p id="p1">p1</p>
        <p class="p2">p2</p>
    </div>
    <div class="son"></div>
</body>
<script>
    // var person = {
    //     name:'shuangmuxi',
    //     age:3,
    //     tags:['js','java','web','...']
    // }
    // 在js代码开头加上 'user strict'(引号不能少)，局部变量建议用let定义，不用 var

    let name = 'shuangmuxi'
    let msg =  `你好呀,${name}`
    console.log(msg);

    // 数组

    // 常用的方法slice（截取），push（压入），pop（弹出），shift（压入首部），unshift（弹出首部），concat（拼接）

// 对象
// （1）使用不存在的对象，不会报错，undefine
// （2）可以动态删减属性
// (3)判断属性在不在对象中 '属性名' in  person

var person = {
    name:'shuangmuxi',
    age:3,
    email:'3282503262@qq.com',
    score:0
}

// 流程控制

// if,while,for和java一样，forEach如下
var arr = [1,2,'shuangmuxi']
arr.forEach(function(value){
    console.log(value);
})
// ES6出来的
// map
// (1)基本使用
var map = new Map([['tom',100],['shuangmuxi',100]])
var value  = map.get('shuangmuxi')
console.log(value);
// (2)添加
// map.set  set无序，不重复
// (3)删除
// map.delete('cmx')

var arr1 = [1,2,3]
for(let x in arr){
    console.log(x);
    console.log(arr1[x]);
}
// 迭代器

// ES6的新特性~

// 使用iterator来迭代Map和Set

var obj = {
    name:'cmx',
    age:3,
    sex:'女'
}
// 对象转化成json格式
var json = JSON.stringify(obj)
// json格式转化为对象
var obj1 = JSON.parse(json)
// 继承
// 原来的继承
// function Student(name){
//     this.name = name
// }
// 给student新增一个方法
// Student.prototype.hello = function(){
//     alert('hello')
// }

// ES6之后的继承
class Student{
    constructor(name){
        this.name = name
    }
    hello(){
        alert('hello')
    }
}

class xiaoStudent extends Student{
    constructor(name,grade){
        super(name)
        this.grade = grade
    }

    myGrade(){
        alert('我是一名小学生')
    }
}
var xiaoming = new Student('xiaoming')
xiaoming.hello()
var xiaohong = new xiaoStudent('xiaohong',10)
xiaohong.myGrade()


// window

// 代表浏览器窗口

// (1)浏览器内外高宽
// window.innerHeight
// window.innerWidth
// window.outerHeight
// window.outerWidth

// screen

// 获取屏幕宽高
// screen.height
// screen.width

// location

// 获取当前页面URL信息
// document

// document代表当前页面

// history代表浏览器的历史记录
// history.back()  后退
// history.forward() 前进

// dom 核心
// 浏览器网页就是一个dom树形结构

// 更新:更新DOM节点
// 遍历DOM节点:得到dom节点
// 删除:删除一个dom节点
// 添加:添加一个新的节点
// 要操作一个dom节点,就必须先获取这个dom节点

// var h1 = document.getElementsByTagName('h1')
// var p1 = document.getElementById('p1')
// var  p2 = document.getElementsByClassName('p2')
// var father = document.getElementsByClassName('father')
// var children = father.children()

var son = document.querySelector('.son')
son.innerHTML = '<strong>123</strong>'

</script>
</html>